<template>
  <div>
    <el-container>
      <el-header height="200px">
        <div>
          <h4>选择货车类型</h4>
        </div>
        <div class="car-type">
          <div class="car" @click="chooseMinivan" :class="{choose : car === '小型货车'}">
            <div class="image image1"></div>
            <span ref="minivan">小型货车</span>
          </div>
          <div class="car" @click="chooseMedium" :class="{choose : car === '中型货车'}">
            <div class="image image2"></div>
            <span ref="medium">中型货车</span>
          </div>
          <div class="car" @click="chooseTruck" :class="{choose :car === '大型货车'}">
            <div class="image image3"></div>
            <span ref="truck">大型货车</span>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="form-container">
          <el-row style="width: 450px;margin: 0 auto">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                     label-position="top" >
              <el-col :span="13">
                <el-form-item label="出发区" prop="departureDistrict">
                  <el-select v-model="formData.departureDistrict" placeholder="请选择出发区" clearable :style="{width: '85%'}">
                    <el-option v-for="(item, index) in districtOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="出发镇" prop="departureTown">
                  <el-select v-model="formData.departureTown" placeholder="请选择出发镇" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in townOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="详细出发地" prop="departureAddress">
                  <el-input v-model="formData.departureAddress" placeholder="请输入详细出发地" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="到达区" prop="destinationDistrict">
                  <el-select v-model="formData.destinationDistrict" placeholder="请选择到达区" clearable :style="{width: '85%'}">
                    <el-option v-for="(item, index) in districtOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="到达镇" prop="destinationTown">
                  <el-select v-model="formData.destinationTown" placeholder="请选择到达镇" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in destinationTownOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="详细目的地" prop="destinationAddress">
                  <el-input v-model="formData.destinationAddress" placeholder="请输入详细目的地" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="货物类型" prop="cargoTypeId">
                  <el-select v-model="formData.cargoTypeId" placeholder="请选择货物类型" clearable :style="{width: '85%'}">
                    <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="重量（kg）" prop="weight">
                  <el-input-number v-model="formData.weight" placeholder="重量（kg）" :precision='1'
                                   controls-position=right style="width: 100%"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="发货人电话" prop="posterPhoneNumber">
                  <el-input v-model="formData.posterPhoneNumber" placeholder="请输入联系人电话" clearable prefix-icon='el-icon-phone'
                            :style="{width: '85%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="发货人" prop="posterName">
                  <el-input v-model="formData.posterName" placeholder="请输入联系人" clearable
                            prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="收件人电话" prop="receiverPhoneNumber">
                  <el-input v-model="formData.receiverPhoneNumber" placeholder="请输入联系人电话" clearable prefix-icon='el-icon-phone'
                            :style="{width: '85%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="收件人" prop="receiverName">
                  <el-input v-model="formData.receiverName" placeholder="请输入联系人" clearable
                            prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item style="float: right">
                  <el-button type="primary" @click="openDialog" size="small">提交订单</el-button>
                  <el-button @click="resetForm" size="small">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </el-main>
      <el-footer>
        <el-popover
          placement="top-start"
          title="收费细则"
          width="200"
          trigger="hover"
          content="根据距离、货物类型、重量收费">
          <el-button class="btn" slot="reference">收费细则</el-button>
        </el-popover>
      </el-footer>
    </el-container>
    <Confirm ref="Dialog" :info="formData" :cargo="cargoType" :car="car" :price="price" @remakeForm="resetForm"/>
  </div>

</template>

<script>
import Confirm from '../components/Confirm'
import {districts} from '@/api/common.js'
export default {
  components: {Confirm},
  props: [],
  data() {
    return {
      formData: {
        departureAddress: '',
        departureDistrict:'',
        departureTown:'',
        destinationAddress: '',
        destinationDistrict:'',
        destinationTown:'',
        cargoTypeId: '',
        weight: '',
        posterPhoneNumber: '',
        posterName: '',
        receiverPhoneNumber:'',
        receiverName:''
      },

      //类型列表
      cargoType:['其他','易碎品','冷冻食品','电子产品'],
      car:'',
      //预估价格
      price:'',
      rules: {
        origin: [{
          required: true,
          message: '请输入起点',
          trigger: 'blur'
        }],
        destination: [{
          required: true,
          message: '请输入目的地',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择货物类型',
          trigger: 'change'
        }],
        weight: [{
          required: true,
          message: '重量（千克）',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入联系人电话',
          trigger: 'blur'
        }],
        person: [{
          required: true,
          message: '请输入联系人',
          trigger: 'blur'
        }],
      },
      //货物类型
      typeOptions: [{
        "label": "电子产品",
        "value": "4"
      }, {
        "label": "冷冻食品",
        "value": "3"
      }, {
        "label": "易碎品",
        "value": "2"
      }, {
        "label": "其他",
        "value": "1"
      }],
      //区列表
      districtOptions:[{
        label: "东区",
        value: "东区",
      }, {
        label: "西区",
        value: "西区",
      }, {
        label: "仁和区",
        value: "仁和区",
      }, {
        label: "米易县",
        value: "米易县",
      },{
        label: "盐边县",
        value: "盐边县",
      }],
      //出发区列表
      townOptions:[],
      //到达镇列表
      destinationTownOptions:[]
    }
  },
  computed: {
  },
  watch: {
    //动态获取出发镇列表
    'formData.departureDistrict'(newValue,oldValue){
       if(oldValue !== newValue){
          this.townOptions.splice(0,this.townOptions.length);
          this.formData.departureTown = ''
          districts.forEach(item=>{
            if(item.value === newValue){
               item.towns.forEach(town=>{
                 this.townOptions.push(town);
               });
            }
          });
       }
    },
    //动态获取到达镇列表
    'formData.destinationDistrict'(newValue,oldValue){
      if(oldValue !== newValue){
        this.destinationTownOptions.splice(0,this.destinationTownOptions.length);
        this.formData.destinationTown = ''
        districts.forEach(item=>{
          if(item.value === newValue){
            item.towns.forEach(town=>{
              this.destinationTownOptions.push(town);
            });
          }
        });
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    //选择货车类型
    chooseMinivan(){
       this.car = this.$refs.minivan.innerText
    },
    chooseMedium(){
       this.car = this.$refs.medium.innerText
    },
    chooseTruck(){
      this.car =  this.$refs.truck.innerText
    },
    //打开弹窗
    findIsEmpty(item){
      return item !==''
    },
    openDialog(){
      if(Object.values(this.formData).every(this.findIsEmpty)){
        this.$refs.Dialog.open();
        this.getUnitPrice();
      }else{
         alert('表单的每个选项都不能为空，请认真填写！')
      }
    },
    //计算预估价格
    getUnitPrice(){
      let base = this.formData.departureDistrict === this.formData.destinationDistrict ? (this.formData.departureTown === this.formData.destinationTown ? 2 : 4) : 6;
      const total = +this.formData.cargoTypeId * base * this.formData.weight;
      this.price = total;
    }
  }
}

</script>

<style scoped>
  .el-main{
     width: 800px;
     margin: 0 auto;
  }
  .el-header{
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .el-header .car-type{
    display: flex;
    width: 600px;
    justify-content: space-evenly;
  }
  .el-footer{
    margin: 0 auto;
  }
  .btn{
     border: 0;
  }
  .btn:hover{

  }

  .car{
    width: 100px;
    height: 120px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .car:hover{
    box-shadow: 0 0 3px black;
    transform: scale(1.1);

  }
  .car.choose{
     border: 2px solid yellow;
  }
  .car .image{
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .image1{
    background-image:url("../images/minivan.jpg");
  }
  .image2{
    background-image:url("../images/medium.jpg");
  }
  .image3{
    background-image:url("../images/truck.jpg");
  }
  .car span{
     position: absolute;
     bottom: 0;
     left: 19px;
  }
</style>

